<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>常用指令：v-for</title>
		<script type="text/javascript" src="../js/framework/vue.js"></script>
		<script>
			window.onload = function () {
				new Vue({
					el: '#v_any',  //'.v_any'  'div'   Vue2.0中允许将Vue实例挂载到<html>或<body>元素，在vue1.0中是可以的
					data: {
						arr: [1,2,3,4,5],
						arr2: [1,2,3,4,3,4,5,6],
						user: {
							name: 'vector',
							age: 23,
							id: '001',
						},
						fruits: [
							{id:1,name:'Apple'},
							{id:2,name:'Orange'},
							{id:3,name:'Peach'}
						]
					}
				});
			}
		</script>
	</head>
	<body>
		<!--<div class="v_any"> -->
		<!--<div>-->	
		<div id="v_any">
			<!--{{arr}}-->
			<!--普通的循环操作-->
			<ul>
				<!--<li v-for="value in arr">
					{{value}}
				</li>-->
				
				<!--<li v-for="value in user">
					{{value}}
				</li>-->
				
				<!--数组键值的循环-->
				<li v-for="(v,k) in arr">
					k{{k}} = {{v}}
				</li>
				
				<br />
				
				<!--对象键值的循环-->
				<li v-for="(v,k) in user">
					{{k}} = {{v}}
				</li>
				
				<br />
				<!--循环带有重复数据的集合。可以通过指定:key属性绑定唯一的key,刚更新元素时可重用元素，提高效率，类似于Vue1.0中的track-by。-->
				<li v-for="(v,k) in arr2" :key="k">
					k{{k}}={{v}}
				</li>
				
				<br />
				<li v-for="(fruit,index) in fruits">
					索引为{{index+1}},
					id为{{fruit.id}},
					水果名称为{{fruit.name}}
				</li>
			</ul>
		</div>
	</body>
</html>
